<template>
  <div v-loading="loading" element-loading-text="拼命加载中">
    <el-row>
      <!-- 搜索框 -->
      <el-col :span="24">
        <div class="search-wrapper">
          <div class="search-box">
          <el-form :inline="true" :model="form" class="demo-form-inline">
            <el-form-item label="事件类型：">
              <el-input v-model="form.user" placeholder="事件类型"></el-input>
            </el-form-item>
           <el-form-item label="事件来源：">
            <el-select v-model="form.region" placeholder="请选择">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button round size="mini" type="primary" @click="handSearch(value)">查询</el-button>
          </el-form-item>
        </el-form>
        </div>
          <!-- <ul class="search-box">
            <li><span class="filter-name">事件类型：</span>
              <el-select v-model="value" placeholder="请选择" clearable style="width:130px" class="filter-item">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"/>
              </el-select></li>
            <li><span class="filter-name">事件来源：</span>
              <el-select v-model="value" placeholder="请选择" clearable style="width:150px" class="filter-item">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"/>
              </el-select></li>
            <li><span class="filter-name">所属河道：</span>
              <el-select v-model="value" placeholder="请选择" clearable style="width:150px" class="filter-item">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"/>
              </el-select></li>
            <li><span class="filter-name">河长：</span>
              <el-select v-model="value" placeholder="请选择" clearable style="width:130px" class="filter-item">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"/>
              </el-select></li>
            <li><span class="filter-name">状态：</span>
              <el-select v-model="value" placeholder="请选择" clearable style="width:150px" class="filter-item">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"/>
              </el-select><br/></li>
            <li><span class="filter-name">上报时间：</span>
              <el-date-picker v-model="value5" type="datetimerange" :picker-options="pickerOptions2" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right"/></li>
            <li style="padding-left:10px;"><el-button style="vertical-align:middle;margin-top:-2px;" round size="mini" type="primary" @click="handSearch(value)">查询</el-button></li>
          </ul> -->
        </div>
      </el-col>
      <!-- 按钮区 -->
      <el-col :span="24">
        <div class="button-wrapper">
          <el-button size="mini" type="primary" round @click="dialogFormVisible=true">增加</el-button>
          <el-button size="mini" type="warning" round  @click="stop()">停用</el-button>
          <el-button size="mini" type="success" round  @click="start()">启动</el-button>
          <el-button size="mini" type="danger" round  @click="del()">删除</el-button>
        </div>
      </el-col>
    </el-row>
    <!-- 表格 -->
    <el-row>
      <el-col :span="24">
        <div class="data-wrapper">
          <template v-if="tableData3!=null">
            <el-table ref="multipleTable" :data="tableData3"  tooltip-effect="dark" style="width: 100%"
                      @selection-change="handleSelectionChange">
              <el-table-column type="selection" label="全选" width="40">
              </el-table-column>
              <el-table-column type="index" label="序号" :index="indexMethod">
              </el-table-column>
              <el-table-column prop="name" label="事件类型" sortable>
              </el-table-column>
              <el-table-column prop="username" label="上报人">
              </el-table-column>
              <el-table-column prop="website" label="所属河道" sortable>
              </el-table-column>
              <el-table-column prop="email" label="河长" sortable>
              </el-table-column>
              <el-table-column prop="phone" label="事件来源">
              </el-table-column>
              <el-table-column prop="address.suite" label="当前状态">
              </el-table-column>
              <el-table-column fixed="right" label="操作" align="center" width="200">
                <template slot-scope="scope">
                  <el-button title="确认" size="small" icon="el-icon-check" type="success" circle style="background-color:#048b57;border:1px solid #048b57;"></el-button>
                  <el-button title="处置" size="small" icon="el-icon-edit-outline" type="primary" circle style="background-color:#c5ab32;border:1px solid #c5ab32;"></el-button>
                  <el-button title="告警阈值" size="small" icon="el-icon-bell" type="warning" circle></el-button>
                  <el-button title="查看" size="small" icon="el-icon-search" type="primary" circle @click="handleView(scope.$index, scope.row)"></el-button>
                  <el-button title="编辑" size="small" icon="el-icon-edit" type="success" circle @click="handleEdit(scope.$index, scope.row)"></el-button>
                  <el-button title="删除" size="small" icon="el-icon-delete" type="danger" circle @click="handleDel(scope.$index, scope.row)"></el-button>
                </template>
              </el-table-column>
            </el-table>
          </template>
        </div>
      </el-col>
    </el-row>
    <!-- 底部按钮和分页 -->
    <el-row :gutter="20" type="flex" justify="space-between" align="center" class="page-wrapper">
      <el-col :span="4">
        <div class="grid-content">
          <el-button type="primary" size="small">批量导入</el-button>
        </div>
      </el-col>
      <el-col :span="20">
        <div class="page-item">
          <el-pagination background  @size-change="handleSizeChange" @current-change="handleCurrentChange"
                         :current-page="currentPage4" :page-sizes="[10, 20, 30, 40]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="40"/>
        </div>
      </el-col>
    </el-row>
    <!-- 弹出窗口区域 -->
    <el-dialog title="用户添加" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-row :gutter="5">
          <el-col :span="12">
            <el-form-item label="河段名称" :label-width="formLabelWidth">
              <el-input v-model="form.name" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="河段长度" :label-width="formLabelWidth">
              <el-input v-model="form.length" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="5">
          <el-col :span="12">
            <el-form-item label="河段开始地址" :label-width="formLabelWidth">
              <el-input v-model="form.beginAddr" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="河段结束地址" :label-width="formLabelWidth">
              <el-input v-model="form.endAddr" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="5">
          <el-col :span="12">
            <el-form-item label="所属省份" :label-width="formLabelWidth">
              <el-select v-model="form.region" placeholder="请选择省份">
                <el-option label="上海" value="shanghai"></el-option>
                <el-option label="北京" value="beijing"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="所属地市" :label-width="formLabelWidth">
              <el-select v-model="form.city" placeholder="请选择地市">
                <el-option label="上海" value="shanghai"></el-option>
                <el-option label="北京" value="beijing"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="5">
          <el-col :span="12">
            <el-form-item label="所属区县" :label-width="formLabelWidth">
              <el-select v-model="form.county" placeholder="请选择区县">
                <el-option label="上海" value="shanghai"></el-option>
                <el-option label="北京" value="beijing"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="所属乡镇/街道" :label-width="formLabelWidth">
              <el-select v-model="form.street" placeholder="请选择乡镇/街道">
                <el-option label="上海" value="shanghai"></el-option>
                <el-option label="北京" value="beijing"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="5">
          <el-col :span="12">
            <el-form-item label="所属村/社区" :label-width="formLabelWidth">
              <el-select v-model="form.village" placeholder="请选择村/社区">
                <el-option label="上海" value="shanghai"></el-option>
                <el-option label="北京" value="beijing"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="有效巡河点数" :label-width="formLabelWidth">
              <el-input v-model="form.points" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="5">
          <el-col :span="24">
            <el-button size="medium" type="primary" icon="el-icon-location">开始河段描点</el-button>
            <div class="form-map">
              地图位置预留区
            </div>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="medium" @click="dialogFormVisible = false">取 消</el-button>
        <el-button size="medium" type="primary" @click="dialogFormVisible = false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
    export default {
        data() {
            return {
              loading: false,
                options: [{
                    value: 'Leanne Graham',
                    label: 'Leanne Graham'
                }],
                value: '',
                pickerOptions2: {
                    shortcuts: [{
                        text: '最近一周',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近三个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                },
                value5: '',
                tableData3:null,
                listQuery: {
                    pno:1,
                    pageSize:10,
                },
                multipleSelection: [],
                currentPage4: 4,
                dialogFormVisible:false,
                dialogFormVisible1:false,
                form: {
                    name: '',
                    length:'',
                    beginAddr:'',
                    endAddr:'',
                    region: '',
                    city: '',
                    county: '',
                    street:'',
                    village:'',
                    points:'',
                },
                formLabelWidth: '100px',
            }
        },
        created() {
            this.getList('/users')
        },
        mounted(){},
        updated(){},
        destroyed(){},
        methods:{
            getList(url) {
                this.loading = true
                this.getRequest(url).then((res)=>{
                    console.log(res)
                    this.tableData3=res.data
                      this.loading = false
                }).catch((error)=>{
                        //错误信息
                        console.log(error)
                })
              
            },
            //搜索功能
            handSearch(val){
              this.loading = true
              this.getList('/users?name='+val)
            },
            insert(){
                console.log("增加设备");//弹框
            },
            stop(){
                console.log("停止设备");//根据序号选中
            },
            start(){
                console.log("启动设备");//根据序号选中,发送ajax改变状态字段
            },
            del(){
                console.log("删除设备");//根据序号选中
                console.log(this.listSelect)//被选中的对象数列表
                location.reload();
                //删除后刷新页面，清空选中列表
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            indexMethod(index) {
                return index+1;
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
            },
            //查看操作
            handleView(index, row){
                console.log(row);
            },
            handleEdit(index, row){
                console.log(index, row);
            },
            handleDel(index, row){
                console.log(index, row);
            }
        },
    }
</script>
<style scoped>

</style>